<%--
  Created by IntelliJ IDEA.
  User: zx583
  Date: 2017/9/23
  Time: 22:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"  isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>room</title>
    <!--
   JQuery EasyUI 1.5.x of Insdep Theme 1.0.0
   演示地址：https://www.insdep.com/example/
   下载地址：https://www.insdep.com
   问答地址：https://bbs.insdep.com

   项目地址：http://git.oschina.net/weavors/JQuery-EasyUI-1.5.x-Of-Insdep-Theme

   QQ交流群：184075694 （优先发布更新主题及内测包）
-->
    <!--
        注意样式表优先级
        主题样式必须在easyui组件样式后。
    -->

    <link rel="shortcut icon" href="/static/images/logo2.ico" />

    <link href="/static/plugins/easyui/themes/insdep/easyui.css" rel="stylesheet" type="text/css">


    <!--
        themes/insdep/easyui_animation.css
        Insdep对easyui的额外增加的动画效果样式，根据需求引入或不引入，此样式不会对easyui产生影响
    -->
    <link href="/static/plugins/easyui/themes/insdep/easyui_animation.css" rel="stylesheet"
          type="text/css">

    <!--
        themes/insdep/easyui_plus.css
        Insdep对easyui的额外增强样式,内涵所有 insdep_xxx.css 的所有组件样式
        根据需求可单独引入insdep_xxx.css或不引入，此样式不会对easyui产生影响
    -->
    <link href="/static/plugins/easyui/themes/insdep/easyui_plus.css" rel="stylesheet"
          type="text/css">

    <!--
        themes/insdep/insdep_theme_default.css
        Insdep官方默认主题样式,更新需要自行引入，此样式不会对easyui产生影响
    -->
    <link href="/static/plugins/easyui/themes/insdep/insdep_theme_default.css" rel="stylesheet"
          type="text/css">

    <!--
        themes/insdep/icon.css
        美化过的easyui官方icons样式，根据需要自行引入
    -->
    <link href="/static/plugins/easyui/themes/insdep/icon.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="/static/plugins/easyui/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/plugins/easyui/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/static/plugins/easyui/themes/insdep/jquery.insdep-extend.min.js"></script>
    <script src="/static/plugins/layer/layer.js"></script>

    <style type="text/css">
        .datagrid-header {
            position: absolute; visibility: hidden;
        }
        .textbox textarea.textbox-text {
            white-space: pre-wrap;
        }
    </style>
</head>

<body>
<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'east',split:true" title="房间成员" style="width:250px">
        <table class="easyui-datagrid" style="width:100%;height:100%" id="roomMember"
               data-options="singleSelect:true,fitColumns:true,url:'/room/getMembers.do?roomId=${param.roomId}',method:'get'">
            <thead>
            <tr>
                <th data-options="field:'userName',width:60,align:'center'"></th>
            </tr>

            </thead>
        </table>
    </div>

    <script type="text/javascript">
        $(function () {
            $("#roomMember").datagrid({
                onClickRow: function (index, row) {
                    $.messager.confirm('', '你确定要将' + row.userName + "提出聊天室吗", function (r) {
                        if (r) {
                            $.post("/room/moveOutMember.do", {
                                'roomId': ${param.roomId},
                                userId: row.userId,
                                userName: row.userName
                            });
                        }
                    });
                }
            });
        });
        function refreshMember() {
            $("#roomMember").datagrid('reload');
        }
    </script>

    <div data-options="region:'center'">
        <div class="easyui-layout" style="width:100%;height:100%;">
            <div data-options="region:'center'">
                <input id="textbox" class="easyui-textbox" data-options="multiline:true,readonly:true" style="width:100%;height:100%">
            </div>
            <script type="text/javascript">
                function appendText(text) {
                    oldText = $("#textbox").textbox('getText');
                    text = oldText + "\n" + text;
                    $("#textbox").textbox('setText', text);
                }
            </script>

            <div data-options="region:'south',split:true" style="height:100px">
                <input id="inputbox" class="easyui-textbox" style="width:100%;height:100%" data-options="multiline:true">
            </div>
            <script type="text/javascript">
                $(function () {
                    $("#inputbox").textbox('textbox').bind('keydown', function(e){
                        if (e.keyCode == 13){
                            send = $("#inputbox").textbox('getText');
                            $("#inputbox").textbox('setText', "");
                            $.post("/room/chat.do",{
                                "roomId" : ${param.roomId},
                                "text" : send
                            });
                            return false;
                        }
                    });
                });
            </script>
        </div>


    </div>
</div>
</body>
</html>
